<template>
  <Card>
    <div class="tableTop" slot="title">
      <p>出入统计</p>
      <Select style="width:200px" v-model="days" placeholder="近七天" @on-change="changeDay">
        <Option value="7">近七天</Option>
        <Option value="30">近三十天</Option>
      </Select>
    </div>
    <div ref="passChart" style="width: 980px;height:580px;"></div>
  </Card>
</template>

<script>
import echarts from 'echarts'
export default {
  data(){
    return{
      option: {
        title: {
            // text: '出入统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['出门人次', '进门人次']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ''
            }
        ],
        yAxis:[
          {
            type: 'value',
            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数
          }
        ],
        series: [
            {
                name: '出门人次',
                type: 'line',
                areaStyle: {},
                data: ''
            },
            {
                name: '进门人次',
                type: 'line',
                areaStyle: {},
                data: ''
            }
        ]
      },
      pass_chart:null,
      days:7
    }
  },
  methods:{
    async getPassData(){
      const {data:res} = await this.$http.get(`/pass/passData/${this.days}`)
      this.option.xAxis[0].data = res.data.dayData
      this.option.series[0].data = res.data.outsData
      this.option.series[1].data = res.data.enterData
      // console.log(res)
      // console.log(this.option.series[0].data)
      // console.log(this.option.series[1].data)
    },
    initEcharts(){
      let dom = this.$refs.passChart;
      this.pass_chart=echarts.init(dom);
    },
    drawEcharts(){
      this.pass_chart.setOption(this.option);
    },
    changeDay(day){
      this.day = day
      // console.log(this.day)
      this.getPassData()
    }
  },
  mounted(){
    //初始化数据
    this.getPassData()
    // 基于准备好的dom，初始化echarts实例
    this.initEcharts()
    // 绘制echarts
    this.drawEcharts()
  },
  watch:{
    //监听option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.pass_chart) {
          if (newVal) {
            this.pass_chart.setOption(newVal);
          } else {
            this.pass_chart.setOption(oldVal);
          }
        } else {
          this.initEcharts();
        }
      },
      deep: true //对象内部属性的监听
    }
  }
}
</script>

<style>
.tableTop{
    justify-content: space-between;
    display: flex;
}
</style>